<!DOCTYPE html>
<html>
	<head>
		<title>CS147 Portfolio, 4</title>
		<script src="../jquery.js" type="text/javascript" charset="utf-8"></script>
		<script>
		var currentPage;
		var pageHistory = [];
		function goPage () {
			var pageToLoad = window.location.hash;
			var prevFound = false;
			for(var i = 0; i < pageHistory.length; i++) {
				if (pageHistory[i] == pageToLoad) {
					$(pageToLoad).removeClass("parentpage");
					$(currentPage).addClass("subpage");
					prevFound = true;
					pageHistory.pop();
				}
			} 
			if(!prevFound) {
				$(pageToLoad).show();
				$(currentPage).addClass("parentpage");
				$(pageToLoad).removeClass("subpage");
				pageHistory.push("#"+currentPage.attr("id"));
			}
			currentPage = $(pageToLoad);
			return false;
		}
		function init() {
			currentPage = $("#home-screen");
			
			var loop = setInterval(function(){
				var curid = currentPage.attr('id');
				if (location.hash == '') {
					location.hash = '#' + curid;
				} else if (location.hash != '#' + curid) {
					goPage(location.hash)
				}
			}, 100);
			
			var bioLink = $("#bio-link");
			var container = $("#container");
			var backHome =	$("#back-home");
			bioLink.click(function(){
				$(".subpage").hide();
				$("#container").addClass("flipped");
				return false;
			})
			backHome.click(function(){
				$("#container").removeClass("flipped");
				return false;
			});
			$("a", "#assignments").click(function(){
				event.stopPropagation();
				window.location.hash = this.href.substring(this.href.search("#"));
				return false;
			})

			
		}
		</script>
		<!-- <link rel="stylesheet" href="week02.css" type="text/css" media="screen" title="no title" charset="utf-8"> -->
		<link rel="stylesheet" href="week04.css" type="text/css" media="screen" title="no title" charset="utf-8">		
	</head>
	<body onload='init()'>
		<div id="container">
			<div id="home-screen">
				<div class='content'>
					<div id="info">
						<div id='fullname'>Joe <span id='last-name'>Student</span></div>
						<div id="tagline">joe@student.com<br/>Interface Designer</div>
					</div>
					<div class="clear"></div>
						<a href="#" id="bio-link">See bio</a>

					<div id='assignments'>
						<h2>Course work</h2>
						<ul>
							<li><a href="#how-might-we">How Might We?</a></li>
							<li><a href="#inspiration">Inspiration</a></li>
							<li><a href="#discovery">Discovery</a></li>
						</ul>
					</div>
					<!-- we need this for our float layout -->
					<div class='clear'></div>
				</div>
			</div>
			<div id='bio'>
				<div class='content'>
					<h2>Bio</h2>
					This is my bio.<br/>
					<a href="#" id="back-home">Back home</a>
				</div>
			</div>
			<div id="how-might-we" class='content subpage'>
				This is some great work I did for the How Might We? Assignment.
			</div>
			<div id="inspiration" class='content subpage'>
				Wow, that was super inspirational.
			</div>
			<div id="discovery" class='content subpage'>
				Can you discover?
			</div>
		</div>
			
	</body>
</html>